<template>
  <div>
    <!-- 在列表最上方的右侧添加一个按钮 -->
    <div style="text-align: left; display: flex; align-items: center;">
      <el-input
          placeholder="序号"
          v-model="numberIndex"
          style="width: 100px"
          readonly>
      </el-input>
      <el-input
          placeholder="请输入号码"
          v-model="searchNumberForIndex"
          style="width: 150px;margin-left: 10px"
          clearable>
      </el-input>
      <el-button size="small" type="primary" style="margin-left: 10px" @click="getNumberIndex">获取序号</el-button>
<!--      <span style="margin-left: 10px;">序号: {{ numberIndex }}</span>-->
      <el-button size="small" type="primary" @click="dialogVisible = true" style="margin-left: 10px;">提取号码</el-button>
    </div>

    <el-table
        :data="items"
        stripe
        style="width: 50%">
      <el-table-column type="index" label="序号" width="150">
      </el-table-column>
      <el-table-column
          prop="result"
          label="号码"
          width="150">
      </el-table-column>
      <el-table-column
          prop="count"
          label="频次"
          width="150">
      </el-table-column>
    </el-table>
    <!-- 弹出框 -->
    <el-dialog title="提取号码" :visible.sync="dialogVisible" width="80%">
      <br/>
      起始编号:
      <el-input
          placeholder="请输入起始编号"
          v-model="startIndex"
          style="width: 150px"
          clearable>
      </el-input>
      结束编号:
      <el-input
          placeholder="请输入结束编号"
          v-model="endIndex"
          style="width: 150px"
          clearable>
      </el-input>
      <el-button size="big" type="primary" plain @click="extractNumbers">提取</el-button>
      <!-- 显示提取结果的大文本框 -->
      <br/>
      <br/>
      <el-input
          type="textarea"
          :rows="5"
          placeholder="提取结果将显示在这里"
          v-model="extractedText"
          style="width: 100%; height: 200px"
          readonly>
      </el-input>
      <el-button size="big" type="primary" plain @click="copyToClipboard">复制</el-button>
      <el-button size="big" type="danger" plain @click="clearFields">清空</el-button>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchNumber: '', // 用于搜索的号码
      searchNumberForIndex: '', // 用于获取序号的号码
      numberIndex: '', // 用于显示号码的序号
      items: [],
      startIndex: '',
      endIndex: '',
      extractedText: '',
      dialogVisible: false, // 控制弹出框是否可见
    };
  },
  methods: {
    freshData(type) {
      var that = this;
      this.$axios.get("/getResultDataCount?type="+type, {
        params: { result: this.searchNumber }
      })
          .then(function (res) {

            if (res.data && res.data.code === 200) {
              const eventSource = new EventSource('http://localhost:8080/events');
              that.items = res.data.data;
            } else {
              console.error('请求失败:', res.data.message);
            }
          })
          .catch(function (error) {
            console.error(error);
          });
    },
    getNumberIndex() {
      const number = this.searchNumberForIndex;
      if (!number) {
        alert('请输入要查询的号码');
        return;
      }

      for (let i = 0; i < this.items.length; i++) {
        if (this.items[i].result === number) {
          this.numberIndex = i + 1;
          return;
        }
      }
      // 如果没有找到该号码
      alert('未能找到该号码');
      this.numberIndex = '';
    },
    extractNumbers() {
      const start = parseInt(this.startIndex, 10);
      const end = parseInt(this.endIndex, 10);

      if (isNaN(start) || isNaN(end)) {
        alert('请输入有效的数字作为起始编号和结束编号');
        return;
      }
      if (start > end) {
        alert('起始编号不能大于结束编号');
        return;
      }
      // 使用空格 ' ' 或制表符 '\t' 来横向排列结果
      const results = this.items.slice(start - 1, end).map(item => item.result).join(' ');
      this.extractedText = results;
    },
    copyToClipboard() {
      const textarea = document.createElement('textarea');
      textarea.value = this.extractedText;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand('copy');
      document.body.removeChild(textarea);
      alert('已复制到剪贴板');
    },
    clearFields() {
      this.startIndex = '';
      this.endIndex = '';
      this.extractedText = '';
    }
  },
  mounted() {
    setInterval(this.freshData("fcsd"), 10000); 
  },


};
</script>
